<template>
  <div class="rightbotton-box">右下角视图</div>
</template>

<script setup>
import { inject, onMounted } from "vue";
const $echarts = inject("echarts");

onMounted(() => {
  const myChart = $echarts.init(document.querySelector(".rightbotton-box"));
  myChart.setOption({
    dataset: {
      source: [
        ["score", "amount", "product"],
        [89.3, 58212, "Matcha Latte"],
        [57.1, 78254, "Milk Tea"],
        [74.4, 41032, "Cheese Cocoa"],
        [50.1, 12755, "Cheese Brownie"],
        [89.7, 20145, "Matcha Cocoa"],
        [68.1, 79146, "Tea"],
        [19.6, 91852, "Orange Juice"],
        [10.6, 101852, "Lemon Juice"],
        [32.7, 20112, "Walnut Brownie"],
      ],
    },
    grid: { containLabel: true },
    xAxis: { name: "amount" },
    yAxis: { type: "category" },
    visualMap: {
      orient: "horizontal",
      left: "center",
      min: 10,
      max: 100,
      text: ["High Score", "Low Score"],
      // Map the score column to color
      dimension: 0,
      inRange: {
        color: ["#65B581", "#FFCE34", "#FD665F"],
      },
    },
    series: [
      {
        type: "bar",
        encode: {
          x: "amount",
          // Map the "product" column to Y axis
          y: "product",
        },
      },
    ],
  });
});
</script>

<style scoped>
.rightbotton-box {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 450px;
  height: 350px;
  background-color: rgba(255, 255, 255, 0.1);
}
</style>